<!--
*@Author: QWP
*@Description: 资产明细表
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-collapsed-sider style="padding-left: 12px;">
      <u-tree :tree-data="treeData" 
        title="区划"
        v-if="!collapsed">
      </u-tree>
    </u-collapsed-sider>
    <a-layout class=" s-bg-white">
      <u-search-header>
        <u-form
          :model="searchF"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto">
          <a-col>
            <a-space>
              <u-icon-button>查询</u-icon-button>
              <u-icon-button itype="export">导出</u-icon-button>
            </a-space>
          </a-col>
        </u-form>
      </u-search-header>
      <a-layout-content class="f-padding-rl24">
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"></u-table>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import { cloneDeep } from 'lodash'
import { TreeProps } from "ant-design-vue/es/vc-tree";
const route = useRoute();
const router = useRouter();

onMounted(() => {
  initCols();
})

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    fwzh: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  { label: "来源", key: "ly", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: {
      options: [
        { label: '购买', value: '1' },
        { label: '自行加工或自行建造', value: '2' },
        { label: '捐赠', value: '3' },
        { label: '无偿调入', value: '4' },
        { label: '置换换入', value: '5' },
      ]
    }
  },
  { label: "关键字", key: "option", element: "input", col: { span: 4 }, formItemProps: formItemProps, },
];

const collapsed = ref<boolean>(false)
const treeData: TreeProps['treeData'] = [
  { title: '一级部门', key: '1', 
    children: [
      { title: '二级部门', key: '1-1', },
      { title: '三级部门', key: '1-2', }
    ] 
  },
  { title: '四级部门', key: '2', },
  { title: '五级部门', key: '3', },
] 

// 列表
const tabData = reactive([
  { dwmc: '应急部门', kplx: '小卡片', zcbm: 'zc-0025421132156', szcmcqr: '救援车辆', zcdl: '车辆', 
    ggxh: '', b7: '待审核'
  },
  { dwmc: '应急部门', kplx: '小卡片', zcbm: 'zc-0025421132156', szcmcqr: '救援器械', zcdl: '器械', 
    ggxh: '', b7: '待审核'
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "dwmc", title: "单位名称", width: 150 },
  { dataIndex: "kplx", title: "卡片类型", width: 150 },
  { dataIndex: "zcbm", title: "资产编码", width: 150 },
  { dataIndex: "zcmc", title: "资产名称", width: 150 },
  { dataIndex: "zcdl", title: "资产大类", width: 150 },
  { dataIndex: "ggxh", title: "规格型号", width: 150 },
  { dataIndex: "b7", title: "数据状态", width: 150, fixed: 'right' },
]);

// 初始化列表表头
const initCols = () => {
  return
  let tCols = cloneDeep(originCols)
  if(['DocDraft', 'DocRed'].includes(route.name)) {
    tCols = tCols.filter(item => item.dataIndex != 'status')
  }
  columns.splice(0, columns.length, ...tCols)
}

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
